<template>
  <div style="padding-bottom: 50px">
    <div id="day">
      <h2 style="padding: 30px 0">每日精选菜谱</h2>
      <div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in list">
            <div style="margin-bottom: 10px">
              <div><img :src="item.url" alt="" style="width: 100%; border-radius: 10px"></div>
              <div style="padding: 3px 0">{{ item.title }}</div>
              <div style="padding: 3px 0;">by {{ item.author }}</div>
            </div>

          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import request from "@/utils/request";

export default {
  name: 'Home',
  data() {
    return {
      list: [
        {url: 'https://cp1.douguo.com/upload/caiku/a/8/0/220x220_a84622f4ac056529b54ab4a4da6f25b0.jpeg', title: '清清凉凉的凉拌青瓜', author: '小魔童'},
        {url: 'https://cp1.douguo.com/upload/caiku/4/f/c/220x220_4f220c38341751451602f5dd755b5a8c.jpg', title: '清清凉凉的凉拌青瓜', author: '小魔童'},
        {url: 'https://cp1.douguo.com/upload/caiku/9/0/1/220x220_90f50a6552c38d2100b49dbc16c9a251.JPG', title: '清清凉凉的凉拌青瓜', author: '小魔童'},
        {url: 'https://cp1.douguo.com/upload/caiku/4/8/5/220x220_48bebcf98801b5dc83a1480a4bc80e45.jpg', title: '清清凉凉的凉拌青瓜', author: '小魔童'},
        {url: 'https://cp1.douguo.com/upload/caiku/a/8/0/220x220_a84622f4ac056529b54ab4a4da6f25b0.jpeg', title: '清清凉凉的凉拌青瓜', author: '小魔童'},
        {url: 'https://cp1.douguo.com/upload/caiku/a/8/0/220x220_a84622f4ac056529b54ab4a4da6f25b0.jpeg', title: '清清凉凉的凉拌青瓜', author: '小魔童'},
        {url: 'https://cp1.douguo.com/upload/caiku/a/8/0/220x220_a84622f4ac056529b54ab4a4da6f25b0.jpeg', title: '清清凉凉的凉拌青瓜', author: '小魔童'},
      ]
    }
  },
  components: {
    HelloWorld
  },
  created() {
    request('/server/api/user').then(res => {
      console.log(res.data)
    })
  }
}
</script>
